<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>压缩图片</title>
    <style>
        h3{ text-align: center; }
        #progress { height: 20px; width: 500px; margin: 10px 0; border: 1px solid gold; position: relative; }
        #progress .progress-item { height: 100%; position: absolute; left: 0; top: 0; background: chartreuse;  transition: width .3s linear; }
        .imgdiv{ width: 400px; text-align: center; display: none; }
        .imgdiv img{ width: 100%; }
    </style>
</head>
<body>
    上传文件
    <!-- accept指定接收的文件类型 -->
    <input type="file" id="file" accept="image/*" multiple />

    <div style="margin:5px 0;">上传进度</div>
    <div id="progress">
        <div class="progress item"></div>
    </div>

    <div class="imgdiv"><img src="" alt="img"></div>
    <div class="bbt"><button class="btn" >压缩</button></div>

    <div class="btn"></div>
    <div class="status"></div>
    <script>
        
        var inputDom = document.getElementById('file');

        inputDom.addEventListener('change',function(e) {
            
            // html5 新增了 File 对象，使之可以在浏览器端处理文件
            var file = this.files[0]; // 取出选定的多个文件中的第一个文件
            

            var formdata = new FormData(); // form 表单对象
            formdata.append('file',file);

            // ajax
            const xhr = new XMLHttpRequest();
            xhr.open('post','http://localhost:6300/uploadPic');

            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200) {
                    console.log('上传成功---')
                    
                    document.querySelector('.status').style.display = 'block';
                    document.querySelector('.status').innerHTML = xhr.responseText;
                }
            }

            // 获取和显示上传进度
            // xhr.upload.onprogress = function(event) {
            //     if(event.lengthComputable) {
            //         let percent = event.loaded / event.total * 100 ;

            //         // 改变样式
            //         document.querySelector('#progress .progress-item')
            //             .style
            //             .width = percent + '%';
            //     }
            // }

            xhr.send(formdata);
        })

        document.querySelector('.btn')
            .addEventListener('click',function() {

                document.querySelector('.status').innerText = '等待中';
                var xhr = new XMLHttpRequest();

                xhr.open('get','http://localhost:6300/zipimg');


                xhr.onreadystatechange = function() {
                    if(xhr.readyState == 4 && ready.status == 200) {

                    }
                }

                xhr.send();
            })


    </script>
</body>
</html>